<template>
  <div v-on:mouseover="mouseIn" v-on:mouseout="mouseOut">
    <Carousel :autoplay="auto" :autoplay-speed="4000" v-model="value1" loop collapsible="false" hide-trigger
              dots="outside" :height="430">
      <CarouselItem>
        <depart-des></depart-des>
      </CarouselItem>

      <CarouselItem :style="[carouseItemStyle,appCenterStyle]">
          <router-link to="/AppCenter">
            <div class="router routeLink router-back">
            <span>
              <h2>App Center</h2>
              <h4>App links reflects to specific functions or groups.</h4>
            </span>
            </div>
          </router-link>
      </CarouselItem>
      <CarouselItem :style="[carouseItemStyle,dashBoardStyle]">
        <router-link to="/DashBoard">
          <div class="router routeLink">
          <span>
            <h2>DashBoard KPI</h2>
            <h4>Major KPI of each department listed here in a dashboard type.</h4>
            </span>
          </div>
        </router-link>
      </CarouselItem>
      <CarouselItem :style="[carouseItemStyle,documentCenterStyle]">
        <router-link to="/DocumentCenter">
          <div class="router">
          <span>
            <h2>Document Center</h2>
            <h4>Document library of materials department which consists of all types of document  that documented in DCC,</h4><h4> as well as lean project submitted by users.</h4>
            </span>
          </div>
        </router-link>
      </CarouselItem>
      <carousel-item :style="[carouseItemStyle,documentCenterStyle]">
        <router-link to="/ProcessViewer">
          <div class="router">
          <span>
            <h2>Process Viewer</h2>
            <h4>Supports user to have a quick tour by referring nodes with a knowledge card description.</h4>
            </span>
          </div>
        </router-link>
      </carousel-item>
    </Carousel>
  </div>
</template>

<script>
  import CarouselItem from "iview/src/components/carousel/carousel-item";
  import DepartDes from "./departDes";

  export default {
    components: {DepartDes, CarouselItem},
    name: "carouse",
    data() {
      return {
        value1: 0,
        carouseItemStyle: {
          backgroundSize: 'cover',
        },
        appCenterStyle: {
          background: 'linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0)),url("/src/assets/home/appCenter.jpg") no-repeat center center'
        },
        dashBoardStyle: {
          background: 'linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0)),url("/src/assets/home/dashBoard.jpg") no-repeat center center'
        },
        birdEyeViewStyle: {
          background: 'linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0)),url("/src/assets/home/3DBirdEye.png") no-repeat center center'
        },
        documentCenterStyle: {
          background: 'linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0)),url("/src/assets/home/documentCenter.jpg") no-repeat center center'
        },
        auto: true
      }
    },
    methods: {
      mouseIn(event) {
        $(event.currentTarget).find('div.router').addClass('router-after');
        this.auto = false;
      },
      mouseOut(event) {
        $(event.currentTarget).find('div.router').removeClass('router-after');
        this.auto = true;
      }
    }
  }
</script>

<style scoped>
  .router {
    position: absolute;
    height: 100%;
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: left;
    align-items: center;
    bottom: 0px;
    transition: all 800ms;
  }

  .router-back {
    background: rgba(0, 0, 0, 0.42);
  }

  .router-after {
    height: 40%;
    background: rgba(0, 0, 0, 0.42);
  }

  .router span {
    margin-left: 140px;
    color: white;
    font-size: 20px;

  }

</style>
